import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./project.module.less";
import { ProjectCollaborationData } from "@type";
import projectIconPNG from "./projectIcon.png";
import projectCollaborationStore from "../projectCollaborationStore";
import clsx from "clsx";
import { Dropdown } from "antd";
import { EllipsisOutlined } from "@ant-design/icons";
import userStore from "@views/userStore";
import hashHistory from "@hashHistory";

interface Iprops {
    children?: ReactNode
}

// 单个项目组件
export default function Project(props: ProjectCollaborationData) {
    const dom = useRef<HTMLDivElement | null>(null);
    const [data, setData] = useState({});
    const [editorName, setEditorName] = useState(false);
    const isSelf = (props.userId === userStore.userId);

    useEffect(() => {
        setEditorName(false);
    }, [props]);

    useEffect(() => autorun(() => {

    }), []);

    const modify = async (projectData: Partial<ProjectCollaborationData>) => {
        await projectCollaborationStore.updata(projectData);
    }

    return (
        <div
            ref={dom}
            className={styles.project}
        >
            <img
                alt=""
                src={projectIconPNG}
                className={styles.icon}
                onClick={() => {
                    hashHistory.push(`/projectDatail/${props.id}`);
                }}
            />
            {
                editorName ?
                    <input
                        type="text"
                        defaultValue={props.name}
                        className={styles.input}
                        maxLength={16}
                        autoFocus
                        placeholder="请输入项目名称"
                        onBlur={async (e) => {
                            const name = (e.target as HTMLInputElement).value;
                            if (name && name !== props.name) {
                                await modify({
                                    id: props.id,
                                    name: (e.target as HTMLInputElement).value
                                });
                            } else {
                                setEditorName(false);
                            }
                        }}
                        onKeyDown={async (e: any) => {
                            if (e.which === 13) {
                                const name = (e.target as HTMLInputElement).value;
                                if (name && name !== props.name) {
                                    await modify({
                                        id: props.id,
                                        name: (e.target as HTMLInputElement).value
                                    });
                                } else {
                                    setEditorName(false);
                                }
                            }
                        }}
                    />
                    :
                    <div
                        className={styles.name}
                        onDoubleClick={() => setEditorName(true)}
                    >{props.name}</div>
            }
            <div>
                <Dropdown
                    placement="bottomLeft"
                    mouseEnterDelay={0}
                    menu={{
                        items: isSelf ? [
                            {
                                key: '1',
                                label: (
                                    <div
                                        onClick={() => {
                                            hashHistory.push(`/projectSetting/${props.id}`);
                                        }}
                                        className={clsx(styles.dropdownItem)}
                                    >
                                        设置
                                    </div>
                                ),
                            },
                            {
                                key: '2',
                                label: (
                                    <div
                                        onClick={() => {
                                            projectCollaborationStore.updata({ id: props.id, status: 1 });
                                        }}
                                        className={clsx(styles.dropdownItem)}
                                    >
                                        移动到已完成
                                    </div>
                                ),
                            },
                            {
                                key: '3',
                                label: (
                                    <div
                                        onClick={() => {
                                            projectCollaborationStore.delete(props.id);
                                        }}
                                        className={clsx(styles.dropdownItem)}
                                    >
                                        删除项目
                                    </div>
                                ),
                            }
                        ] : [
                            {
                                key: '1',
                                label: (
                                    <div
                                        onClick={() => {
                                            projectCollaborationStore.exit(props.id);
                                        }}
                                        className={clsx(styles.dropdownItem)}
                                    >
                                        退出项目
                                    </div>
                                ),
                            }
                        ]
                    }}
                >
                    <EllipsisOutlined
                        className={styles.menuIcon}
                    />
                </Dropdown>
            </div>
        </div>
    );

}